<template>
    <div class="share-box">
        <div class="share-tit">
            分享
           <img src="../../assets/image/detail/icon_close_gray@2x.png" alt="" @click="closeShare()">
        </div>
        <div class="share-box-type">
            <van-row type="flex" justify="space-around">
                <van-col span="4" class="text-align-c">
                     <!-- v-clipboard:copy="locationHref" v-clipboard:success = "onCopyQQ" -->
                    <img class="share-width" src="../../assets/image/share/icon_wechat.png" @click="shareBox()" alt="">
                    <p>微信</p>
                </van-col>
                <van-col span="4" class="text-align-c">
                    <img class="share-width" src="../../assets/image/share/icon_pyq.png" v-clipboard:copy="locationHref" v-clipboard:success = "onCopyQQ" alt="">
                     <p>朋友圈</p>
                </van-col>
                <van-col span="4" class="text-align-c">
                    <img class="share-width" src="../../assets/image/share/icon_qq.png" v-clipboard:copy="locationHref" v-clipboard:success = "onCopyQQ" alt="">
                     <p>QQ</p>
                </van-col>
                <van-col span="4" class="text-align-c">
                    <img class="share-width" src="../../assets/image/share/icon_space.png" v-clipboard:copy="locationHref" v-clipboard:success = "onCopyQQ" alt="">
                     <p>QQ空间</p>
                </van-col>
            </van-row>
            <van-row type="flex" justify="space-around" class="share-top">
                <van-col span="4" class="text-align-c">
                    <img class="share-width" src="../../assets/image/share/icon_microblog.png" v-clipboard:copy="locationHref" v-clipboard:success = "onCopyQQ" alt="">
                     <p>微博</p>
                </van-col>
                <van-col span="4" class="text-align-c">
                    <img class="share-width" src="../../assets/image/share/icon_link.png" v-clipboard:copy="locationHref" v-clipboard:success = "onCopyQQ" alt="">
                     <p>复制链接</p>
                </van-col>
                <van-col span="4" class="text-align-c">
                   <!--  <img class="share-width" src="../../assets/image/share/icon_platform.png" v-clipboard:copy="locationHref" v-clipboard:success = "onCopyQQ" alt=""> -->
                     <!-- <p>平台动态</p> -->
                </van-col>              
               <van-col span="4" class="text-align-c">
                    <!-- <img class="share-width" src="../../assets/image/share/icon_space.png" alt=""> -->
                </van-col>
            </van-row>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
import { Toast } from 'vant'
export default {
    props:["share"],
    data(){
        return{
            locationHref:window.location.href,
            shares:null
        }
    },

    created(){
        let self = this
        var Intent = null,
            File = null,
            Uri = null,
            main = null;
        if(window.plus){
            mui.plusReady(function() { 
                self.updateSerivces() 
                if(plus.os.name == 'Android'){
                    Intent = plus.android.importClass("android.content.Intent")
                    File = plus.android.importClass("java.io.File")
                    Uri = plus.android.importClass("android.net.Uri")
                    main = plus.android.runtimeMainActivity()
                }
            })
        }
    },
    methods:{
        //关闭分享
        closeShare(){
            this.$emit("shareValue",false);
        },
        onCopyQQ(e){
            Toast('复制成功')
        },
        // 获取分享服务列表
        updateSerivces(){
            let self = this
            plus.share.getServices(function(s) {
                self.shares = {};
                for (var i in s) {
                    console.log(`${i}=======${s}`)
                    var t = s[i];
                    console.log(`${s[i]}++++++++`)
                    self.shares[t.id] = t;
                    console.log(`${t.id}-----------`)
                }
                self.outSet("获取分享服务列表成功");
            }, function(e) {
                self.outSet("获取分享服务列表失败：" + e.message);
            });
        },
        // 分享调取
        shareBox(){
            this.shareAction(this.shares['weixin']);
        },
        // 分享操作
        shareAction(s){
            let self = this
            if (s.authenticated) {
                self.outSet("---已授权---");
                self.shareMessage(s, 'WXSceneSession');
            } else {
                self.outSet("---未授权---");
                s.authorize(function() {
                    self.shareMessage(s, 'WXSceneSession');
                }, function(e) {
                    self.outLine("认证授权失败");
                });
            }
        },
        // 发送分享消息
        shareMessage(s, ex) {
            var msg = {
                content: '分享-详情',
                href: 'http://blog.csdn.net/zhuming3834',
                title: 'HGDQ-分享测试-title',
                content: 'HGDQ-分享测试-content',
                thumbs: ['http://img3.3lian.com/2013/v10/4/87.jpg'],
                pictures: ['http://img3.3lian.com/2013/v10/4/87.jpg'],
                extra: {
                    scene: ex
                }
            };
            s.send(msg, function() {
                outLine("分享成功!");
            }, function(e) {
                outLine("分享失败!");
            });
        },
        // 控制台输出日志
        outSet(msg) {
            console.log(msg);
        },
        // 界面弹出吐司提示
        outLine(msg) {
            mui.toast(msg);
        },
    }
}
</script>

<style scoped>
.share-box{
    background: transparent
}
.van-icon-close{
    margin-top: .5rem;
}
.share-tit{
    padding: 0 .6rem;
    height: 2rem;
    width: calc(100% - 1.2rem);
    border-bottom:.04rem solid #eeeeee;
    line-height: 2rem;
    font-size: 0.68rem;
}
.share-tit>img{
    float: right;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.5rem;
}
.share-box-type{
    padding: .8rem 0
}
.share-box-type p{
    color: black;
}
.share-width{
    width: 2rem;
}
.share-top{
    margin-top: .8rem;
}
</style>

